<template>
  <div class="entrance-view">
    <!-- 标题 -->
    <div class="right-top betweenbox">
      <div class="right-top-name centerbox">110KV商西变电站</div>
      <div class="right-top-back" @click="goBack"></div>
    </div>
    <!-- 内容 -->
    <div class="right-contain">
      <div class="right-contain-one">
        <EntranceGuardPageCenter />
      </div>
      <div class="right-contain-two">
        <EntranceGuardPageRight />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import EntranceGuardPageCenter from "./EntranceGuardPageCenter.vue";
import EntranceGuardPageRight from "./EntranceGuardPageRight.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    EntranceGuardPageCenter,
    EntranceGuardPageRight,
  },
})
export default class EntranceView extends Vue {}
</script>

<style lang="scss" scoped>
.entrance-view {
  width: 100%;
  height: 100%;
  .right-top {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-name {
      font-size: 0.2rem;
      font-weight: 400;
      color: #76eefa;
    }
    &-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .right-contain {
    width: 100%;
    height: calc(100% - 0.4rem);
    display: flex;
    &-one {
      width: 10.98rem;
      height: 100%;
      margin: 0 0.2rem;
    }
    &-two {
      width: 4.45rem;
      height: 100%;
    }
  }
}
</style>